<template>
	<div id="discovery">
		<!-- 轮播图 -->
		<el-carousel :interval="4000" type="card" height="200px">
			<el-carousel-item  class="lbt" v-for="item in 3">
				<img src="../../assets/img/lbt1.jpg" v-if="item== 1">
				<img src="../../assets/img/lbt2.jpg" v-if="item ==2">
				<img src="../../assets/img/lbt3.jpg" v-if="item == 3">
			</el-carousel-item>
		</el-carousel>
		<!-- 推荐歌单 -->
		<div id="recommend">
			<h2 class="title">推荐歌单</h2>
			<div class="item" v-for="(item,index) in list" :key='index'>
				<div class="img-wrap">
					<!-- <div class="HTML8">
						<span>{{item.copywriter}}</span>
					</div> -->
					<img :src="item.picUrl" alt="mj">
					<p class="name">{{item.name}}</p>
				</div>

			</div>
		</div>
		<!-- 最新音乐 -->
		<div id="newsong">
			<h2>最新音乐</h2>
			<div class="newnav" v-for="(item,index) in newsong" :key='index'>
				<img :src="item.picUrl">
				<img src="../../assets/img/bf.png" id="icon" @click="palyMusic(item.id)" v-if="isTrue">


				<p id="sp">{{item.name}}</p>
				<br>
				<br>
				<p>{{item.song.artists[0].name}}</p>

			</div>
		</div>
		<!-- 推荐mv -->
		<div id="">
			<h2>最新MV</h2>
			<div class="item" v-for="(item,index) in mv" :key='index'>
				<div class="img-wrap">
					<!-- <div class="HTML8">
						<span>{{item.copywriter}}</span>
					</div> -->
					<img :src="item.picUrl" alt="mj" style="padding-left: 40px;">

					<p class="name" style="margin-left: 40px;">{{item.name}}</p>

				</div>

			</div>
		</div>
	</div>
</template>

<script>
	/* 导入axios */
	import axios from 'axios'
	export default {
		name: 'Discovery',
		data() {
			return {
				list: [], //存放推荐歌单数据
				newsong: [], //存放最新音乐数据
				isTrue: true,
				mv: [] //存放mv数据
				
			}
		},
		methods: {
			//播放音乐
			palyMusic(id) {
				axios({
					url: 'https://autumnfish.cn/song/url',
					method: 'get',
					params: {
						id
					}
				}).then(res => {
					let url = res.data.data[0].url
					//设置父组件的播放地址
					this.$parent.musicUrl = url
				})
			}
		},
		created() { //轮播图获取图片数据
			axios({ //网络请求
					url: 'https://autumnfish.cn/banner',
					method: 'get'
				}).then(res => {
					this.imgs = res.data.banners

				}),
				/* 推荐歌单 */
				axios({
					url: 'https://autumnfish.cn/personalized',
					method: 'get',
					params: { //获取数据量limit
						limit: 10
					}

				}).then(res => {
					this.list = res.data.result
				})
			/* 最新音乐 */
			axios({
				url: 'https://autumnfish.cn/personalized/newsong',
				method: 'get'
				/* params:{} */
			}).then(res => {
				this.newsong = res.data.result
			})
			/* 最新mv */
			axios({
				url: 'https://autumnfish.cn/personalized/mv',
				method: 'get'
			}).then(res => {
				this.mv = res.data.result
			})
		}
	}
</script>

<style scoped="scoped">
	#icon {
		width: 50px;
		height: 50px;
		float: right;
		padding-right: 50px;
		padding-top: 20px;
	}

	.newnav p {
		float: left;
		color: black;
		padding-left: 20px;
		font-size: 20px;
		padding-top: 8px;
	}

	.newnav p span {
		padding: 5px;
	}

	.newnav img {
		width: 100px;
		height: 100px;
		padding-top: 15px;
		float: left;
	}

	.newnav {
		width: 500px;
		height: 130px;
		float: left;
		margin-left: 120px;
		margin-top: 20px;
	}

	#recommend {
		width: 1500px;

	}

	#sp {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* 溢出内容隐藏 */
		width: 200px;
		
	}

	.lbt {
		background-color: #00FFFF;
	}

	.name {
		background-color: #C2E7B0;
		width: 200px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* 溢出内容隐藏 */
	}

	.HTML8 {
		width: 200px;
		height: 60px;
	}

	.HTML8 span {
		display: none;
	}

	.img-wrap img {
		width: 215px;
		height: 215px;
	}

	.img-wrap {
		float: left;
		margin-left: 40px;
		margin-top: 15px;

	}

	.HTML8:hover {
		cursor: pointer
	}

	.HTML8:hover span {
		text-align: center;
		display: block;
		color: #FFF;
		width: 200px;
		height: 50px;
		line-height: 36px;
		background: #000;
		filter: alpha(opacity=60);
		-moz-opacity: 0.5;
		opacity: 0.5;
	}

	.desc-wrap {
		width: 230px;
		height: 330px;
	}
</style>
